<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
<link rel="stylesheet" href="../css/layui.css"  media="all">
</head>
<body>
<br />
<div class="demoTable">
<form id="myform">
	<span class="navy_padding">商品类型名称</span>
    <div class="layui-inline">
      <input class="layui-input" name="tname" id="tname" autocomplete="on">
    </div>
    <div class="layui-inline">
      <input type="file" name="photo" id="photo" onchange="setImagePreviews(this,'showpic')">
    </div>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius" onclick="add()">添加</button>
    </form>
</div>
<div id="showpic" style="width:100%;height:100px"></div>
<table class="layui-hide" id="type_data" lay-filter="test"></table>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="lock" value="{{d.tno}}" title="在架" lay-filter="lockDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script src="../js/layui.all.js" charset="utf-8"></script>
<script src="../../js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../js/ajaxfileupload.js" charset="utf-8"></script>
<script src="../js/showpic.js" charset="utf-8"></script>
<script src="../../js/show-dialog.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
	var table = layui.table, form = layui.form;
	table.render({
    	elem: '#type_data',
		url:'../../type/list',
		toolbar: 'default', //开启头部工具栏，并为其绑定左侧模板
    	title: '商品类型信息表',
    	limits:[2, 5, 10, 20, 30, 50, 100],
    	limit:2,
    	cellMinWidth: 120,
    	id: "type_data",
    	method: "POST",
	    cols: [[
	      {
			type: 'checkbox', fixed: 'center'},
	      	{field:'tno', title:'编号',fixed: 'center', unresize: true, sort: true, align: 'center'},
			{field:'tname', title:'类型名称', align: 'center', edit: 'text'},
			{field:'pic', title:'图片', align: 'center', edit: 'text', templet: function(res){
	        	return '<img src="../../../' + res.pic + '" width="100px" height="100px"/>'
	      	}},
			{fixed: 'right', title:'操作', toolbar: '#barDemo', align: 'center'},
			{field:'status', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
	    ]],
		page: { 
			layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'], //自定义分页布局
	      //,curr: 5 // 设定初始在第 5 页
	      groups: 10, // 只显示 1 个连续页码
	      first: '首页', //不显示首页
	      last: '尾页' //不显示尾页
	      
	    }
	});
	
	//监听锁定操作
	//监听锁定操作
	form.on('checkbox(lockDemo)', function(obj){
		obj.elem.checked = !obj.elem.checked;
		form.render('checkbox'); // 渲染
		let txt = "下架";
		let status = 0;
		if (!obj.elem.checked) {
			txt = "上架";
			status = 1;
		}
		layer.confirm('您确定要 ' + txt + ' 这个类型的商品吗?', {btn: ['确定','取消']}, function(){
			$.post("../../type/update",{tno:obj.elem.value,status:status}, rt =>{
				if(rt.code == 200){
					layer.closeAll();
					obj.elem.checked =!obj.elem.checked;
					form.render("checkbox");
					return;
				}
				layer.alert(txt + "失败,请稍后重试.....");
			})
			
		});
	});
  
	// 头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据;
    	switch(obj.event){
	    	case 'add':
	            layer.msg('添加');
	          break;
	          case 'update':
	            if(data.length === 0){
	              layer.msg('请选择一行');
	            } else if(data.length > 1){
	              layer.msg('只能同时编辑一个');
	            } else {
	              layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
	            }
	          break;
	          case 'delete':
	            if(data.length === 0){
	              layer.msg('请选择您要删除的数据...', {icon:5,offset:"auto",time:2000});
	            } else {
	            	layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？',{icon: 3, title: "确认"}, function(index){
	            		var arrs = [];
	            		for (var i = 0; i < data.length; i ++) {
	            			arrs.push(data[i].id);
	            		}
	            		console.info(arrs);
	            		layer.close(index);
	            		table.reload('admin_data',  // table id
	            				{ 
	            					where: { id: 1, status: 2 }, // 参数
	                         		page: {
	                                   curr: 1 // 重新从第 1 页开始
	                         		}
	                      });
	    			});
	            }
	          break;
		};
	});
  
	// 监听行工具事件
	table.on('tool', function(obj){
    	var data = obj.data;
    	if(obj.event === 'del'){
      		layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？', function(index){
        		obj.del();
        		layer.close(index);
			});
    	} else if(obj.event === 'edit'){
      		layer.prompt({
        		formType: 3,
        		value: data.email
      		}, function(value, index){
				obj.update({
					email: value
        		});
        		layer.close(index);
      		});
		}
	});
});	

function add(){
	let tname =$.trim($("#tname").val());
	if(tname == "" || !tname){
		showmsg("类型名称不能为空","red");
		return;
	}
	
	let files = document.getElementById("photo").files;
	if(files.length <= 0){
		showmsg("类型图片不能为空","red");
		return;
	}
	
	$.ajaxFileUpload({
		url:"../../type/add",
		secureuri:false,
		fileElementId:"photo",
		data:{tname: tname},
		dataType:"json",
		success: function(rt, status){
			if(rt.code == 511){
				showmsg(rt.msg,"red");
				return;
			}
			
			if(rt.code == 200){
				$("#myform")[0].reset();
				$("#showpic").html("");
				layui.table.reload("type_data");
				return;
			}
			showmsg("添加失败，请稍后重试...\n" + e, "red");
		},
		error:function(rt, status, e){
			showmsg("添加失败，请稍后重试...\n" + e, "red");
			return;
		}
	})
}

</script>
</body>
</html>